<template>
	<view class="cu-list menu-avatar">
		<block v-for="(item ,index) in chatList" :key="index">
			<view class="cu-item" @click="toSeeUserChatMessage(item)"
				:class="{'grayscale':!item.isOnLine,'move-cur':modalName=='move-box-'+ index}"
				@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
				:data-target="'move-box-' + index">
				<!--  style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);" -->
				<view class="cu-avatar square lg radius" :style="{backgroundImage: 'url(' + item.avatar + ')'}">
					<view v-if="item.unreadNum!=null&&item.unreadNum!=0&&item.unreadNum!='undefined'"
						class="cu-tag badge">
						{{item.unreadNum}}
					</view>
				</view>
				<view class="content" style="padding-top: 15rpx;">
					<view class="text-grey my-faj-space-between">
						<view class="text-cut" style="font-size: 34rpx;color: #333333;">{{item.name}}</view>
						<!-- <view v-if="item.userTag!=null&&item.userTag!=''&&item.userTag!='undefined'"
							class="cu-tag round bg-orange sm">{{item.userTag}}</view> -->
						<view class="text-grey text-l" style="margin-left: 10rpx;">{{item.latelyTime}}</view>
					</view>
					<view class="text-gray text-sm my-faj-space-between" style="margin-top: 5rpx;">
						<view class="text-cut" style="font-size: 30rpx;">
							<!-- <text v-if="item.isSuccess" class="cuIcon-infofill text-red  margin-right-xs"></text> -->
							{{item.latelyMsg}}
						</view>
					</view>
				</view>
				<view class="move">
					<view class="bg-grey">置顶</view>
					<view class="bg-red">删除</view>
				</view>
			</view>
		</block>
		<view style="text-align: center;height: 160rpx;line-height: 160rpx;">
			-- 没有更多消息了 --
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['chatList', 'loginUserInfo']),
		data() {
			return {
				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null
			}
		},
		created() {
			// this.$myWebsocket.connectSocket();
		},
		methods: {
			load(){
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			// ListTouch计算滚动
			//滚动后，停下来，就会触发这个方法
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			toSeeUserChatMessage(item) {
				// console.log(item)
				uni.navigateTo({
					url: '/pages/index/chat-message/chat-message?item=' + encodeURIComponent(JSON.stringify(item))
				});

			}
		}
	}
</script>

<style>
	.unreadNum {
		background-color: #dd514c;
		border-radius: 200upx;
		font-size: 20upx;
		padding: 5upx 10upx;
		color: #ffffff;
	}
</style>
